<template>
  <view class="wrap">
    <view class="header">
      <img class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/sportsBg.png" alt="" />
    </view>
    <view class="content">
      <view class="title">运动内容</view>
      <view class="sports">
        <view class="left">
          <icon type="" :class="['iconfont', state.contentObj.icon, 'icons']" />
        </view>
        <view class="right_info">
          <view class="name">{{ state.contentObj.content }}</view>
          <view class="time">{{ state.contentObj.cronCycle }}分钟</view>
        </view>
      </view>
      <view class="heart">
        <view class="heart_title">运动心率控制</view>
        <view class="text"
          >为了您运动过程的安全性，请您将运动心率范围控制在<text style="font-weight: 700"
            >{{ state.contentObj.heartRateMin }}-{{ state.contentObj.heartRateMax }}</text
          >次/分，以确保运动安全有效。</view
        >
      </view>
    </view>
    <view @tap="recordSports" class="btn">
      <view class="wraps">
        <text class="name">记录运动</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { readDetail, taskDetailInfo } from '@/api/hmm'

const state = reactive({
  id: '',
  contentObj: {},
  userInfo: {},
  getUserId: ''
})
const sportTypeList = ref([
  {
    url: 'icon-yumaoqiu1',
    active: false,
    value: '羽毛球'
  },
  {
    url: 'icon-yuqie1',
    active: false,
    value: '瑜伽'
  },
  {
    url: 'icon-youyong1',
    active: false,
    value: '游泳'
  },
  {
    url: 'icon-guangchangwu1',
    active: false,
    value: '广场舞'
  },
  {
    url: 'icon-lanqiu1',
    active: false,
    value: '篮球'
  },
  {
    url: 'icon-manzou1',
    active: false,
    value: '慢走'
  },
  {
    url: 'icon-kuaizou1',
    active: false,
    value: '快走'
  },
  {
    url: 'icon-paobu1',
    active: false,
    value: '跑步'
  },
  {
    url: 'icon-kangfucao1',
    active: false,
    value: '康复操'
  },
  {
    url: 'icon-huaibengyundong1',
    active: false,
    value: '踝泵运动'
  },
  {
    url: 'icon-huaxue1',
    active: false,
    value: '滑雪'
  }
])

onLoad((options) => {
  state.id = options ? options.id : ''
})
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.getUserId = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''
  init()
})
const init = () => {
  uni.showLoading({
    title: '加载中'
  })

  taskDetailInfo(state.id).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.contentObj = JSON.parse(res.data.itemContent)
      const iconUrl = sportTypeList.value.find((item) => item.value == state.contentObj.content)
      state.contentObj.icon = iconUrl.url
    }
  })
}
const recordSports = () => {
  uni.navigateTo({
    url: '/packA/pages/sportsInformation/index'
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: calc(100vh - 48rpx);
  padding-bottom: calc(184rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(184rpx + env(safe-area-inset-bottom));
  overflow: auto;
  background: #f3f7f8;

  .header {
    position: relative;
    height: 328rpx;

    .headerBg {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .content {
    position: relative;
    z-index: 2;
    padding: 32rpx;
    margin: -124rpx 32rpx 0;
    background: #fff;
    border-radius: 16rpx;

    .title {
      margin-bottom: 24rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #222;
    }

    .sports {
      display: flex;
      gap: 20rpx;
      justify-content: flex-start;
      padding: 32rpx;
      margin-bottom: 24rpx;
      border: 1rpx solid #e5e6eb;
      border-radius: 8rpx;

      .left {
        display: inline-block;
        width: 96rpx;
        height: 96rpx;
        line-height: 96rpx;
        text-align: center;
        vertical-align: middle;
        background: #f2fdfb;
        border-radius: 8rpx;

        .icons {
          font-size: 64rpx;
          color: #00d1b6;
        }
      }

      .right_info {
        .name {
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
        }

        .time {
          margin-top: 10rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #999;
        }
      }
    }

    .heart {
      padding: 16rpx 24rpx;
      margin-top: 24rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #008372;
      background: rgb(220 239 240 / 40%);
      border-radius: 8rpx;

      .heart_title {
        margin-bottom: 8rpx;
        font-weight: 600;
      }

      .text {
        text-align: justify;
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;

    .wraps {
      height: 88rpx;
      margin: 22rpx 32rpx;
      line-height: 88rpx;
      text-align: center;
      background: #00d1b6;
      border-radius: 44rpx;

      .name {
        display: inline-block;
        font-size: 32rpx;
        font-weight: 700;
        color: #fff;
        vertical-align: middle;
      }

      .img {
        display: inline-block;
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
      }
    }
  }
}
</style>
